<template>
  <div class="home">
    <div class="banner" v-if="banner">
      <img :src="banner.picture.picFilepath" alt class="banner-img" />
    </div>
    <pad class="layout">
      <div class="menu">
        <van-row>
          <van-col span="8" class="menu-col">
            <router-link to="/orderList">
              <img src="./img/appointment-record.png" alt class="menu-img" />
              <div>预约记录</div>
            </router-link>
          </van-col>
          <van-col span="8" class="menu-col">
            <router-link to="/myFriend">
              <img src="./img/friend.png" alt class="menu-img" />
              <div>我的浆友</div>
            </router-link>
          </van-col>
          <van-col span="8" class="menu-col">
            <router-link to="/recommend">
              <img src="./img/recommended-award.png" alt class="menu-img" />
              <div>推荐奖励</div>
            </router-link>
          </van-col>
        </van-row>
      </div>
      <router-link tag="div" to="/recommend" class="activity" v-if="activity">
        <img :src="activity.picture.picFilepath" alt="">
      </router-link>

      <div>
        <News v-for="item in news" :news="item" :key="item.id" />
      </div>
    </pad>
  </div>
</template>

<script>
import News from "@/components/news";
import Pad from "@/components/pad";
import ScrollView from "@/components/ScrollView";
import { newsList } from "@/api/news";
import { getBanner, getActive} from '@/api/home';
export default {
  data() {
    return {
      banner:'',
      news: [],
      activity:''
    };
  },
  components: {
    News,
    Pad,
  },
  created() {
    // 获取banner
    getBanner().then(({ data }) => {
      console.log(data)
      this.banner = data;
    })
    // 获取活动
    getActive().then(({ data }) => {
      console.log(data)
      this.activity = data;
    })
    // 获取资讯
    newsList({
      type: 1,
      current: 1,
      size: 2
    }).then(({ data }) => {
      this.news = data.records;
    });
  },
  methods:{
    test(){
      this.$tip.show();
    }
  }
};
</script>
<style lang='scss'>
.home {
  padding-bottom: 2rem /* 150/75 */;
  .banner {
    height: 5.066667rem /* 380/75 */;
    overflow: hidden;
    img {
      width: 100%;
    }
  }
  .layout {
    margin-top: -0.96rem /* 72/75 */;
  }
  .menu {
    position: relative;
    z-index: 200;
    margin-bottom: 0.32rem /* 24/75 */;
    height: 2.933333rem /* 220/75 */;
    padding-top: 0.48rem /* 36/75 */;
    border-radius: 0.213333rem /* 16/75 */;
    box-shadow: 0px 3px 7px 0px rgba(0, 0, 0, 0.05);
    &-col {
      text-align: center;
    }
    background-color: #fff;
    &-img {
      width: 1.413333rem /* 106/75 */;
      margin-bottom: 0.266667rem /* 20/75 */;
    }
  }
  .activity {
    width:100%;
    height: 1.6rem /* 120/75 */;
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 0.32rem /* 24/75 */;
    overflow: hidden;
    img {
      width: 100%;
    }
  }
}
</style>
